<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
      姓名：<input type="text" class="uname" name="uname" /> 年龄：<input
        type="text"
        class="age"
        name="age"
      />
      性别:
      <select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      薪资：<input type="text" class="salary" name="salary" /> 就业城市：<select
        name="city"
        class="city"
      >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
      <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
      </tbody>
    </table>

    <script>
      //获取表单
      const form = document.querySelector('.info')
      // 通过属性选择器获取所有带name属性的form中的元素
      const items = form.querySelectorAll('[name]')

      //获取tbody
      const tbody = document.querySelector('tbody')

      // console.log(items)

      //准备一个数组接收学生信息
      const renderData = [
        {
          id: 1,
          uname: '萧炎',
          age: 30,
          gender: '男',
          city: '乌坦城',
          salary: '无限大',
        },
        {
          id: 2,
          uname: '林动',
          age: 30,
          gender: '男',
          city: '乌坦城',
          salary: '无限大',
        },
        {
          id: 3,
          uname: '唐三',
          age: 30,
          gender: '男',
          city: '乌坦城',
          salary: '无限大',
        },
      ]

      //绑定提交事件
      form.addEventListener('submit', function (e) {
        //阻止表单默认提交行为
        e.preventDefault()

        //循环判断表单项是否为空
        for (let i = 0; i < items.length; i++) {
          if (items[i].value === '') return alert('请输入必填项')
        }

        // console.log(items)

        //准备一个对象接收每个学生的信息
        const obj = {}
        obj.id = renderData.length + 1
        obj.uname = items[0].value
        obj.age = items[1].value
        obj.gender = items[2].value
        obj.salary = items[3].value
        obj.city = items[4].value

        // console.log(obj)

        //将学生信息放到数组中
        renderData.push(obj)

        // console.log(renderData)
        // 还原重置表单
        this.reset()

        render(renderData)
      })

      render(renderData)

      //2.封装渲染函数
      function render(data) {
        //在添加新数据之前清空原数据
        tbody.innerHTML = ''
        //1.创建一个新节点
        data.forEach(function (item, index) {
          const tr = document.createElement('tr')

          //2.修改tr内容
          tr.innerHTML = `
          <td>${item.id}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id="${index}">删除</a>
          </td>
          `
          //3.添加到父元素里
          tbody.appendChild(tr)
        })
      }

      //3.给tbody绑定事件委托删除事件
      tbody.addEventListener('click', function (e) {
        //判断是否是a标签触发
        if (e.target.tagName === 'A') {
          // console.log(e.target.dataset.id)
          const index = e.target.dataset.id
          renderData.splice(index, 1)
          render(renderData)
        }
      })
    </script>
  </body>
</html>
